import React, { Component } from 'react'
import './catalogue.css';
import { BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';


class Catalogue extends Component {

    constructor(props){
        super(props);
        
        
        this.state = {
            'index':0,
            'position':98,
            'tabPosition':0
        };
    }

    

    selectedExplain(e){
        let position = e.target.offsetLeft;
        this.setState({
            'index':0,
            'position':position,
            'tabPosition':0
        });
    }

    selectedCatalog(e){
        let position = e.target.offsetLeft * 2 + e.target.offsetWidth;
        //228  98+32
        this.setState({
            'index':1,
            'position':position,
            'tabPosition':-this.props.width
        });
    }


    render() {

        let width = this.props.width;
        let index = this.state.index;
        let position = this.state.position;
        let tabPosition = this.state.tabPosition;
        let explain = this.props.explain;
        let chapter = this.props.chapter;
        let buy = this.props.buy;
        let price = this.props.price;

        return (
            <div className="catalogue">
                <div className="selection-card">
                    <div style={{left:position}} className="bottom_line"></div>
                   <div>
                       <span onClick={(e)=>this.selectedExplain(e)} className={
                           index === 0 ? "selection selection-active" : "selection"
                       }>目录</span>
                   </div>
                    <div>
                        <span onClick={(e)=>this.selectedCatalog(e)} className={
                            index === 1 ? "selection selection-active" : "selection "
                        }>详情</span>
                    </div>
                </div>
                
                <div className="catalogue-content-view">
                    <div className="catalogue-content-box" style={{width:width*2,left:tabPosition}}>
                        
                        


                        <div className="catalogue-content " style={{width:width}}>
                            <div className="catalogue-content-wrapper">
                                {chapter.map((value, index)=>{
                                    return (
                                        <div key={index} className="flex-row-4">
                                            {value.map((question, index2)=>{
                                                let path = '/exam/'+ question.url;

                                                let lockCss = 'icon iconfont icon-yijiesuo book-auth';
                                                if(buy === 0 && question.free === 0 && price > 0){
                                                    lockCss = 'icon iconfont icon-yisuo book-auth';
                                                }


                                                return (
                                                    <Link key={index2} to={path}>
                                                        <div key={index2} className="project-question">
                                                        {question.name}
                                                            <span>
                                                                <i className={lockCss}></i>
                                                            </span>
                                                        </div>
                                                    </Link>
                                                )
                                            })}
                                        </div>
                                    )
                                })}
                            </div>
                        </div>

                        <div className="catalogue-content " style={{width:width}}>
                            <div className="catalogue-content-wrapper">
                                <p className="about-page">试卷简介</p>
                                <p className="about-page about-page-color">
                                    {explain}
                                </p>
                            </div>
                        </div>


                    </div>

                </div>
            </div>
        );
    }
}

export default Catalogue;